<template>
	<view class="shopCard">
		<view class="navbar" >
			<view class="nav-item" :class="{current: filterIndex === 0}" @click="tabClick(0)">
				综合排序
			</view>
			<view class="nav-item" :class="{current: filterIndex === 1}" @click="tabClick(1)">
				销量优先
			</view>
			<view class="nav-item" :class="{current: filterIndex === 2}" @click="tabClick(2)">
				<text>价格</text>
				<view class="p-box">
					<text :class="{active: priceOrder === 1 && filterIndex === 2}" v-if="priceOrder === 2 " class="icon yticon icon-arrow-fine-up"></text>
					<text :class="{active: priceOrder === 2 && filterIndex === 2}" v-else-if="priceOrder === 1 "  class="icon yticon icon-jiantour-copy"></text>
					<text v-else  class="icon yticon icon-yiguoqi"></text>
				</view>
			</view>
			<text class="cate-item icon yticon icon-fenlei" @tap="change_lis_style"></text>
		</view>


		<view :class="lis_style==0?'goods_list_continor2':'goods_list_continor'">
			<view class="goods_list_item" v-for="(item,index) in goodsList" :key="index" @click="$api.toUrl(`/pages/menu0/detail?id=${item.id}`)">
				<image :src="item.thumb" mode="aspectFill" class="goods_img"></image>
				<view class="goods_infos">
					<view class="goods_name">
						{{item.name}}
					</view>
					<view class="tags" v-if="item.description != '' && lis_style == 0">
						<text>{{item.description}}</text>
					</view>
					<view class="price_info">
						<text>{{item.price}}</text>
						<text class="source_price">{{item.marketprice}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "shopGoods",
		props: {
			headerPosition:{
				type: String,
				default: 'fixed',
			},

			goodsList: {
				type: Array,
				required: true,
				default: [],
			},
		},
		data() {
			return {
				modalName: '',
				sx: "",
				xia: "",
				shang: "",
				cateitem: "",

				headerTop: '0px',
				filterIndex: 0,
				priceOrder: 0, //1 价格从低到高 2价格从高到低	
				lis_style: 0,
			}
		},
		onLoad() {

		},
		methods: {

			change_lis_style() {
				this.lis_style = this.lis_style == 0 ? 1 : 0;
			},
			tabClick(index) {
				if (this.filterIndex === index && index !== 2) {
					return;
				}
				this.filterIndex = index;
				this.sorts = index;
				if (index === 2) {
					this.priceOrder = this.priceOrder === 1 ? 2 : 1;
				} else {
					this.priceOrder = 0;
				}
				if (this.priceOrder == 1) this.sorts = 3;
				if (this.priceOrder == 2) this.sorts = 4;
				
				this.$emit('change', {
					sorts: this.sorts,
				})
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.shopCard {
		//background-image: linear-gradient(to bottom, #fff5f3 60%, #fff);
		width: 100%;
		flex-shrink: 0;
		margin-right: 20rpx;
		border-radius: 8rpx;
		padding: 8rpx 10rpx;
	}

	.navbar {
		//position: fixed;
		left: 0;
		//top: var(--window-top);
		display: flex;
		width: 100%;
		height: 80upx;
		background: #fff;
		box-shadow: 0 2upx 10upx rgba(0, 0, 0, .06);
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 30upx;
			color: $font-color-dark;
			position: relative;

			&.current {
				color: $base-color;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 120upx;
					height: 0;
					border-bottom: 4upx solid $base-color;
				}
			}
		}

		.p-box {
			display: flex;
			flex-direction: column;

			.yticon {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30upx;
				height: 14upx;
				line-height: 1;
				margin-left: 4upx;
				font-size: 26upx;
				color: #888;

				&.active {
					color: $base-color;
				}
			}

			.xia {
				transform: scaleY(-1);
			}
		}

		.cate-item {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			width: 80upx;
			position: relative;
			font-size: 44upx;

			&:after {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				border-left: 1px solid #ddd;
				width: 0;
				height: 36upx;
			}
		}
	}


	.goods_list_continor {

		background-color: #fff;
		padding: 30rpx;
		padding-left: 20rpx;
		display: grid;
		grid-template-columns: repeat(2, 240rpx);
		grid-gap: 20rpx;

		.goods_list_item {
			background-color: white;
			border-radius: 10rpx;

			.goods_img {
				width: 240rpx;
				height: 240rpx;
				border-radius: 10rpx 10rpx 0 0;
			}

			.goods_infos {
				padding: 15rpx;
				padding-bottom: 20rpx;
				font-size: 30rpx;

				.goods_name {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.price_info {
					font-size: 28rpx;
					color: red;
					margin-top: 15rpx;
				}

				.price_info::before {
					content: '￥';
					font-size: 20rpx;
				}

				.source_price {
					color: gray;
					font-size: 22rpx;
					margin-left: 10rpx;
					text-decoration: line-through;
				}


				.pay_num {
					font-size: 20rpx;
					color: gray;
					margin-left: 10rpx;
				}

				.tags {
					display: flex;
					font-size: 20rpx;
					line-height: 20rpx;
					margin-top: 5rpx;
					padding-right:5rpx;

					&>text {
						display: inline-block;
						color: red;
						border-radius: 8rpx;
						border: 1px solid red;
						padding: 5rpx;
					}
				}
			}
		}
	}




	.goods_list_continor2 {
		padding: 30rpx 20rpx;
		background-color: #fff;

		.goods_list_item {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;

			.goods_img {
				width: 220rpx;
				height: 220rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
				flex-shrink: 0;
			}

			.goods_infos {
				font-size: 30rpx;

				.goods_name {
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					color: black;
					height: 90rpx;
				}

				.price_info {
					font-size: 35rpx;
					color: red;
					margin-top: 25rpx;
					font-weight: bold;
				}

				.price_info::before {
					content: '￥';
					font-size: 20rpx;
				}

				.source_price {
					color: gray;
					font-size: 25rpx;
					margin-left: 10rpx;
					text-decoration: line-through;
				}

				.tags {
					display: flex;
					font-size: 20rpx;
					line-height: 20rpx;
					margin-top: 5rpx;
					padding-right: 10rpx;

					&>text {
						display: inline-block;
						color: red;
						border-radius: 8rpx;
						border: 1px solid red;
						padding: 5rpx;
					}
				}
			}
		}
	}
</style>